<template>
  <div>
    <!-- 搜索框 -->
    <div class="ss">
      <van-button round icon="flower-o">一起喝</van-button>
<<<<<<< HEAD
      <van-search
        shape="round"
        class="s1"
        placeholder="搜索商品"
        v-model="kw"
        @search="goProducts"
      />
=======
      <van-search shape="round" class="s1" placeholder="搜索商品" v-model="kw" @search="goProducts"/>
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
    </div>
    <!-- 定位 -->
    <div class="DW">
      <!-- 定位 -->
      <div class="dw">
<<<<<<< HEAD
        <router-link
          class="d1"
          to="/location"
          v-if="$store.state.ConfirmResult"
          >{{ $store.state.ConfirmResult }}</router-link
        >
=======
        <router-link class="d1" to="/location" v-if="$store.state.ConfirmResult">{{$store.state.ConfirmResult}}</router-link>
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
        <router-link class="d1" to="/location" v-else>西安市></router-link>
        <div class="d2">距离您1.1km</div>
      </div>
      <!-- 加地址 -->
      <div class="dz">
        <button class="b1">
          <button class="b2">自取</button>
          外卖
        </button>
      </div>
    </div>

<<<<<<< HEAD
    <van-notice-bar
      left-icon="volume-o"
      :scrollable="false"
      style="background: white"
    >
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item>冬日限定:储值300元,立赠1杯。</van-swipe-item>
        <van-swipe-item>共同防疫·减配送费</van-swipe-item>
        <van-swipe-item>我爱你,你爱我,我是奈雪的茶</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
=======
<van-notice-bar left-icon="volume-o" :scrollable="false" style=" background: white;">
  <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :show-indicators="false"
  >
    <van-swipe-item>冬日限定:储值300元,立赠1杯。</van-swipe-item>
    <van-swipe-item>共同防疫·减配送费</van-swipe-item>
    <van-swipe-item>我爱你,你爱我,我是奈雪的茶</van-swipe-item>
  </van-swipe>
</van-notice-bar>
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127

    <!-- 导航栏 -->
    <van-tree-select
      height="150vw"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="itemtype(active)"
    >
      <template #content>
        <div v-if="datalist" class="product">
          <div class="pro" v-for="item in datalist" :key="item.did">
            <div>
              <img :src="`/downloadFile/${item.img}`" alt="" />
            </div>
            <div>
              <h1>{{ item.title }}</h1>
              <van-tag color="#ffe1e1" text-color="#ad0000">{{
                item.label
              }}</van-tag>
              <div class="pro_p">
                <p>{{ item.article }}</p>
              </div>
              <div class="pro_span">
                <span style="font-size: 3.5vw; font-weight: 800"
                  >￥{{ item.price.toFixed(2) }}</span
                >
                <van-button
                  color="#a7d500"
                  type="primary"
                  size="small"
                  round
                  style="margin: 0; height: 18px"
<<<<<<< HEAD
                  
                  @click="shows(item.did)"
=======
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
                  >选规格</van-button
                >
              </div>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
<<<<<<< HEAD
    <div class="sku">
      <!-- <button @click="show = true" class="skushow">基础用法</button> -->
      <van-sku
        v-model="show"
        stepper-title="选择商品数量"
        :sku="sku"
        :properties="properties"
        :goods="goods"
        :goods-id="goodsId"
        :quota="quota"
        :quota-used="quotaUsed"
        :hide-stock="sku.hide_stock"
        @add-cart="onAddCartClicked"
        @buy-clicked="onPointClicked"
      >
        <!-- 自定义 sku-header-price -->
        <!-- <template #sku-header-price="props">
        <div class="van-sku__goods-price">
          <span class="van-sku__price-symbol">￥</span
          ><span class="van-sku__price-num">{{ props.price }}</span>
        </div>
      </template> -->

        <!-- 自定义 sku actions -->
      </van-sku>
    </div>
=======
     <tabbar/>
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
  </div>
</template>

<script>
<<<<<<< HEAD
// import { Toast } from 'vant';
export default {
  watch: {
    kw(newValue) {
      let kw = newValue;
      console.log("kw", kw);
=======
import tabbar from '../components/Tabbar.vue';
// import { Toast } from 'vant';
export default {
  components: { tabbar },
  watch: {
    kw(newValue) {
      let kw=newValue
      console.log('kw',kw);
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
    },
  },
  data() {
    return {
      //搜索框数据
<<<<<<< HEAD
      kw: "",
      data: [],
      datalist: [],
      list: [],
      active: 0,
      items: [],
      show: false,
      goodsId: 1,
      quota: 20,
      quotaUsed: 1,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "糖度", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "标准", // skuValueName：规格值名称
                // imgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-3.png', // 规格类目图片，只有第一个规格类目可以定义图片
                // previewImgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-3.png', // 用于预览显示的规格类目图片
              },
              {
                id: "2",
                name: "少甜",
                // imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                // previewImgUrl: 'https://img01.yzcdn.cn/2.jpg',
              },
              {
                id: "3",
                name: "少少甜",
                // imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                // previewImgUrl: 'https://img01.yzcdn.cn/2.jpg',
              },
              {
                id: "4",
                name: "不另外加糖",
              },
            ],
            // largeImageMode: false, //  是否展示大图模式
          },
          {
            k: "吸管", // skuKeyName：规格类目名称
            k_s: "s2", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "01", // skuValueId：规格值 id
                name: "环保吸管", // skuValueName：规格值名称
              },
              {
                id: "02",
                name: "纸吸管",
              },
              {
                id: "03",
                name: "塑料吸管",
              },
            ],
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 1, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "01", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "02", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 3, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "03", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 3200, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 4, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "01", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 5, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "02", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 6, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "03", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 7, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "01", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 8, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "02", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 9, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "03", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 10, // skuId
            s1: "4", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "01", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 11, // skuId
            s1: "4", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "02", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 12, // skuId
            s1: "4", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "03", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "32.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: true, // 是否无规格商品
        hide_stock: true, // 是否隐藏剩余库存
      },
      properties: [
        {
          k_id: 1,
          k: '加料', // skuKeyName：规格类目名称
          is_multiple: true, //是否可以多选
          v: [
            {
              id: '001', // skuValueId：规格值 id
              name: '珍珠', // skuValueName：规格值名称
            },
            {
              id: '002',
              name: '椰果',
            },
            {
              id: '003',
              name: '补丁',
            },
          ],
        },
      ],
      goods: {
        // 默认商品 sku 缩略图
        picture: "/downloadFile/59.jpeg",
      },
    };
  },
  methods: {
    goList() {
      this.$router.push("/list");
    },
    goProducts() {
      this.$router.push(`/search/${this.kw}`);
    },
    // 添加购物车
    onAddCartClicked(e) {
      console.log(e);
       this.$router.push(`/cart`)
    },
    // 立即购买
    onPointClicked(e) {
      console.log(e);
      this.$router.push(`/order`)
    },
    shows(did) {
      this.show = true;
      console.log(did);
      this.axios.get("/list?did=" + did).then((res) => {
        this.list = res.data.data;
        console.log(res.data.data[0]);
         this.sku.price=(res.data.data[0].price).toFixed(2)
        // this.sku.price = res.data.data[0].price;
        this.sku.collection_id = res.data.data[0].did;
        this.goods.picture =`/downloadFile/${res.data.data[0].img}`
      });
    },

    itemtype(index) {
      let items = this.items[index].text;
      this.axios.get("/type?items=" + items).then((res) => {
        this.datalist = res.data.data;
      });
    },
  },
  mounted() {
=======
      kw:'',
      data: [],
      datalist: [],
      active: 0,
      items: [],
    };
  },
  methods: {
       goProducts() { 
            this.$router.push(`/search/${this.kw}`)

    },
    
    itemtype(index) {
      let items = this.items[index].text;
      console.log(items);
      this.axios.get("/type?items=" + items).then((res) => {
        console.log("商品列表", res);
        this.datalist = res.data.data;
        console.log(this.datalist);
      });
    },
    
  },
  mounted() {
  
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
    this.axios.get("/product").then((res) => {
      console.log("商品列表", res);
      this.data = res.data.data;
      this.items.push(...this.data);
      console.log(this.items);
    });
<<<<<<< HEAD
    let items = "当季限定";
    this.axios.get("/type?items=" + items).then((res) => {
      console.log("商品列表", res);
      this.datalist = res.data.data;
    });
=======
    let items="当季限定"
     this.axios.get("/type?items=" + items).then((res) => {
        console.log("商品列表", res);
        this.datalist = res.data.data;
        console.log(this.datalist);
      });
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
    // this.itemtype(0)
  },
  // created(){
  //   this.axios.get("/product").then((res) => {
  //     console.log("商品列表", res);
  //     this.data = res.data.data;
  //     this.items.push(...this.data);
  //     console.log(this.items);
  //   });
  // }
};
</script>

<style scoped>
<<<<<<< HEAD
.notice-swipe {
  height: 45px;
  line-height: 45px;
}
=======
  .notice-swipe {
    height: 45px;
    line-height: 45px;
  }
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
.ss {
  display: flex;
}
.DW {
  display: flex;
  justify-content: space-between;
}
.DW .dz {
  margin: 10px;
}
.dw {
  margin: 10px;
}
.dw .d1 {
  font-weight: 700;
  color: black;
}
.dw .d2 {
  font-size: 10px;
  color: rgb(146, 175, 175);
  margin: 5px 0 0 5px;
}
.b1 {
  width: 110px;
  font-size: 10px;
  height: 25px;
  border-radius: 15px;
  background-color: aliceblue;
  border: 0;
}
.b2 {
  width: 60px;
  height: 25px;
  border-radius: 15px;
  margin: -2px 0 0 -13px;
  color: white;
  background-color: black;
  border: 0;
}
img {
  width: 80px;
  height: 80px;
}
.van-button {
  height: 34px;
  margin-top: 10px;
  margin-left: 10px;
}
.pro {
  display: flex;
  margin-bottom: 10px;
}
.pro h1 {
  font-size: 3.4vw;
  font-weight: 600;
}
.van-tag {
  margin: 5px 5px 5px 0;
}

.pro_p {
  height: 15px;
  width: 27vh;
}
.pro_p p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: rgb(146, 175, 175);
}
.pro_span {
  display: flex;
  justify-content: space-between;
}
.van-sidebar-item--select::before {
  background-color: #a7d500;
}
.van-tree-select__nav {
  flex: 0.7;
}
.van-sidebar-item {
  text-align: center;
}
</style>